{include file="public/public"}
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <div class="layui-body layui-tab-content site-demo site-demo-body">
        <div class="layui-tab-item layui-show">
            <div class="layui-main">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                </fieldset>
                <span class="layui-breadcrumb">
                    <a href="__APP__/{$menuConfigArry['functionMod']}/{$menuConfigArry['menuLabel']}">{$menuConfigArry['pmenuName']}</a>
                    <a><cite>{$menuConfigArry['menuName']}</cite></a>
                </span>
                <hr>

                <div id="main" style='width:100%;height:500px;'></div>
                <div id='map_box' style='width:100%;height:500px;display:none;'>
                    <div style='text-align:center;font-family:"微软雅黑";margin-bottom:5px;'>
                        <span id='maptitle' style='font-size:15px;'></span>
                        <button style='cursor:pointer;position:relative;top:-3px;' onclick='backind();'>返回</button>
                    </div>
                    <div id='allmap'></div>
                </div>
                <div id="show" style="DISPLAY:none" class="show">
                    <table class="layui-table" lay-skin="line">
                       <thead >
                        <tr>
                            <td colspan="4">酒店信息</td>
                            <input type="hidden" id="id" name="id">
                            <input type="hidden" id="ipaddr" name="ipaddr">
                            <input type="hidden" id="hotelName" name="hotelName">

                        </tr>
                        </thead>
                        <tbody>
                        <tr class="ctt_gr">
                            <td width="244" align="right">酒店名：</td>
                            <td width="248" align="left" id="hotel2" name="hotel2"></td>
                            <td width="244" align="right">房间数：</td>
                            <td width="248" align="left" id="clientNo" name="clientNo"></td>
                        </tr>
                        <tr class="ctt_gr">
                            <td width="244" align="right">cpu：</td>
                            <td width="248" align="left" id="cpu" name="cpu">

                            </td>
                            <td width="244" align="right">更新时间：</td>
                            <td width="248" align="stime" id="stime" name="stime"></td>
                        </tr>
                        <tr class="ctt_gr">
                            <td width="244" align="right">链接：</td>
                            <td width="248" align="left"><input type="button" value="跳转" onclick="link()"/>
                            </td>

                        </tr>


                        <tr class="ctt_gr">
                            <td height="31" colspan="4" align="center">
                                <input name="submit22" type="button" value="关闭" border="0" onclick="document.getElementById
	('show').style.display='none'" class="layui-btn layui-btn-warm"/></td>
                        </tr>
                        </tbody>
                    </table>

                </div>


            </div>
        </div>
    </div>
</div>


<div id='probox'></div>
<style type="text/css">
	#allmap{height:500px;width:100%;margin:0px auto;overflow: hidden;font-family:"微软雅黑";}
	#probox{
		width:100px;height:66px;display:none;background-image:url(__PUBLIC__/images/bg_maplog.png);
		position:absolute;text-align:center;font-family:"微软雅黑";overflow:hidden;
	}
</style>
  <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZFrrzgw9CzThkNn5p1KkfmUe59MtYivE"></script>
<script>
function link(){
    var id = $("#id").val();
    var ipaddr = $("#ipaddr").val();
    var hotelName = $("#hotelName").val();
   var urlHotel='http://'+ipaddr+'/'+hotelName+'/admin';
  //  alert(urlHotel);
//   top.location.href=urlHotel;
    window.open(urlHotel);
}
function showclick(val){
    var json=JSON.parse(val);
	var stime=json.stime;

    stime=new Date(parseInt(stime) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    $("#id").val(json.id);
    $("#clientNo").html(json.clientNo);
    $("#hotelName").val(json.hotelName);
    $("#hotel2").html(json.hotel);
    $("#cpu").html(json.cpu);
    $("#stime").html(stime);
    $("#ipaddr").val(json.ipaddr);

    $("#show").show();
}
function quxiao0(){
	$("#show0").hide();
}

</script>

<script type="text/javascript">	
   var myChart = echarts.init(document.getElementById('main'));
   
   myChart.setOption({
	   //backgroundColor: '#1b1b1b',
	    title : {
	        text: '全国酒店分布',
	        subtext: '总数:'+{$totalnum}+'家',
	        x:'center',
	    },
	    legend: {
	        orient: 'vertical',
	        x:'left',
	        data:[
	        	{
	        	  name : '在线', 
	        	  textStyle : {color:'#8CCF6E'}, 
	        	  icon : 'image://__PUBLIC__/images/on_h.jpg'
	        	},
	        	{
	        	  name : '离线', 
	        	  textStyle : {color:'#EFA538'}, 
	        	  icon : 'image://__PUBLIC__/images/off_h.jpg'
	        	}
	        ],
	    },
	    toolbox: {
	        show : true,
	        orient : 'vertical',
	        x: 'right',
	        y: 'center',
	        feature : {
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    series : [
	        {
	            name: '在线',
	            type: 'map',
	            mapType: 'china',
	            hoverable: false,
	            roam:false,
	            data : [],
	            itemStyle:{
	                normal:{
	                    borderColor:'rgba(100,149,237,1)',
	                    borderWidth:1.5,
	                    areaStyle:{
	                        color: '#CACBCC'
	                    }
	                }
	            },
	            markPoint : {
	            	symbol : 'image://__PUBLIC__/images/loc_on.png',
	                effect : {
	                    show: true,
	                    type: 'bounce',
	                },
	                data :{$onlinelist}
	            }
	        },
	        {
	            name: '离线',
	            type: 'map',
	            mapType: 'china',
	            hoverable: false,
	            roam:false,
	            data : [],
	            itemStyle:{
	                normal:{
	                    borderColor:'rgba(100,149,237,1)',
	                    borderWidth:1.5,
	                    areaStyle:{
	                        color: '#CACBCC'
	                    },
	                },
	            },
	            markPoint : {
	            	symbol:'image://__PUBLIC__/images/loc_off.png',
	                effect : {
	                	show:true,
	                	type:'bounce',
	                },
	                data : {$offlinelist}
	            }
	        },
	    ]
	});
    myChart.on('click', function (params) {
    	$('#main').hide();
    	if(params.data.geoCoord){
    		var name = params.value;
    	}else{
    		var name = params.name;
    	}
    	map.centerAndZoom(name, 7);
   		$('#maptitle').text(name+" 酒店分布详情");
    	$('#map_box').show();
	});
    myChart.on('hover', function (params) {
    	if(params.data.geoCoord){
    		var name = params.value;
    	}else{
    		var name = params.name;
    	}
    	var pronums = {$pronums};
    	var onnum = 0;
    	var offnum = 0;
    	if(pronums[name]){
    		onnum = pronums[name]['on']?pronums[name]['on']:0;
    		offnum = pronums[name]['off']?pronums[name]['off']:0;
    	}
   	    var xPos = parseInt(params.event.pageX)-64 + "px";  
        var yPos = parseInt(params.event.pageY)-68 + "px";
        var html = '<p style="font-size:16px;line-height:25px;">'+name+'</p><p>'+onnum+'在线 '+offnum+'离线</p>';
        $('#probox').html(html);
        $('#probox').css({top: yPos, left: xPos});
        $('#probox').show();
    }); 
    myChart.on('mouseout', function (params) {
        $('#probox').hide();
   }); 
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom(true);
    var mapoption = [
         {
             "featureType": "boundary",
             "elementType": "geometry",
             "stylers": {
                  "color": "#208bea",
                  "weight": "2",
                  "visibility": "on"
          }
       }
     ]
    map.setMapStyle({
   	  styleJson:mapoption
   	});
    var index = 0;
    var myGeo = new BMap.Geocoder();
    var arrtmp=<?php echo json_encode($roomArr);?>;  
    var hotels=eval(arrtmp);  
    var adds = new Array();
    var timenow = Date.parse(new Date())/1000;
    for(i=0;i<hotels.length;i++){  
        var lat = hotels[i]['lat']/100000000;
        var lng = hotels[i]['lng']/100000000;
        var datatmp = hotels[i];
        var myIcon = new BMap.Icon("__PUBLIC__/images/timg.png", new BMap.Size(58,67));
        var hotel = new BMap.Point(lng,lat);
        var marker = new BMap.Marker(hotel,{icon:myIcon});
        map.addOverlay(marker);
    	//marker.addEventListener("click",attribute);
    	(function() {  
            var theHotel = hotels[i];  
            marker.addEventListener("click",function(){  
                showInfo(this,theHotel);  
            });  
        })(); 
    	var label = new BMap.Label(hotels[i]['hotel'],{offset:new BMap.Size(20,-10)});
    	if(hotels[i]['timestate']==0){
    		label.setStyle({  
            	border:"1px solid #1484E4",
            	font:"微软雅黑",
            	background:'#8CCF6E',
            	color:"#262626"
            });
        }else{
        	label.setStyle({  
            	border:"1px solid #1484E4",
            	background:'#EFA538',
            	font:"微软雅黑",
            	color:"#262626"
            });
        }
    	marker.setLabel(label);
    }  
    function backind(){
    	$('#map_box').hide();
    	$('#main').show();
    }
    function showInfo(thisMarker,hotel){
    	var stime=new Date(parseInt(hotel['stime']) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
	    $("#id").val(hotel['id']);
	    $("#clientNo").html(hotel['clientNo']);
	    $("#hotelName").val(hotel['hotelName']);
	    $("#hotel2").html(hotel['hotel']);
	    $("#cpu").html(hotel['cpu']);
	    $("#stime").html(stime);
	    $("#ipaddr").val(hotel['ipaddr']);
	    $("#show").show();
    }  
</script>

